<template>
  <div class="w-full">
    <el-form :model="form" label-width="120px" :label-position="'top'">
      <el-form-item label="标题">
        <el-input v-model="form.title" />
      </el-form-item>
      <el-form-item label="视频">
        <UploadFile v-model="form.src" title="选择视频" @change="fileChange" :fileType="['mp4']" :limit="1" />
      </el-form-item>
      <el-form-item label="时长">
        <el-row :gutter="20">
          <el-input v-model="form.duration.h" class="w-20" placeholder="时" /><span class="mx-2">时</span>
          <el-input v-model="form.duration.m" class="w-20" placeholder="分" /><span class="mx-2">分</span>
          <el-input v-model="form.duration.s" class="w-20" placeholder="秒" /><span class="mx-2">秒</span>
        </el-row>
      </el-form-item>

    </el-form>
  </div>
</template>

<script setup lang='ts'>
import UploadFile from '@/components/ma-upload-file/index.vue'
import { formatSecondsToHour } from '@/utils/date'
const model = defineModel({
  default: {
    title: '',
    src: '',
    duration: { h: '0', m: '0', s: '0' }
  }
}
);
const form = ref(model.value);
watch(() => form.value, (data) => {
  model.value = data;
}, {
  immediate: true,
  deep: true
})
const fileChange = (file) => {
  if (file.status == 'ready') {
    const reader = new FileReader();
    reader.readAsDataURL(file.raw);
    reader.onload = () => {
      const video = document.createElement("video");
      video.src = reader.result as string;
      video.onloadedmetadata = () => {
        form.value.duration = formatSecondsToHour(
          parseInt(video.duration)
        )
      }
    };
  }
}
</script>

<style></style>
